<template>
  <view style="position: relative;">
    <view :class="'relevant-info ' + (isMore ? 'relevant-info-all' : '')" @tap="jumpDetail(noteDetail.content)">
      <image class="relevant-img" mode="aspectFill"
        :src="noteDetail.contentType === 'PRODUCT' ? noteDetail.content.coverUrl : noteDetail.content.imageUrl"></image>
      <view class="scenic-box">
        <view class="scenic-name">{{ noteDetail.contentType === 'PRODUCT' ? noteDetail.content.productName :
          noteDetail.content.poiTitle }}</view>
        <view class="scenic-address" v-if="noteDetail.content.address"><uni-icons type="location-filled" color="#999999"
            size="12"></uni-icons>{{ noteDetail.content.address }}</view>
        <view class="price-box">
          <view class="scenic-price" v-if="noteDetail.contentType === 'PRODUCT'">
            <text class="price-sign">{{ noteDetail.content.priceUnit }}</text>
            <text class="price">{{ noteDetail.content.salePrice }}</text>
            <text class="price-text" v-if="noteDetail.content.floatingPrice">起</text>
          </view>
          <view class="tag-box" v-if="noteDetail.contentType === 'POI'">
            <text class="tag" v-for="(item, index) in tags" :key="index">{{ item }}</text>
          </view>
          <view class="look">{{ noteDetail.contentType === 'PRODUCT' ? '去购买' : '去看看' }}</view>
        </view>
      </view>
      
    </view>
    <view v-if="isMore && !isLast" class="line-view"></view>
  </view>
</template>

<script>
export default {
  props: {
    noteDetail: {
      type: Object,
      default: {},
    },
    isMore: {
      type: Boolean,
      default: false
    },
    isLast: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tags: ['亲子同乐', "4A景区"],
    };
  },
  components: {},
  onLoad() { },
  methods: {
    //文中提及商品点击
    jumpDetail(item) {
      var queryObj = {
        poiId: item.poiId,
        productType: item.productType,
        productId: item.stdId,
        supplierProductId: item.supplierProductId
      }
      this.$productUrlJump(queryObj, true)
    },
  },
};
</script>

<style lang="scss" scoped>
.relevant-info {
  width: 710rpx;
  height: 160rpx;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* margin-bottom: 39rpx; */
  margin: 0 auto 30rpx auto;
  position: relative;
}

.relevant-info-all {
  width: 710rpx;
  height: 160rpx;
  background: #ffffff;
  box-shadow: none;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
}

.relevant-img {
  width: 128rpx;
  height: 128rpx;
  border-radius: 10px;
  margin-left: 14rpx;
}

.scenic-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #242424;
  line-height: 38rpx;
}

.scenic-address {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  line-height: 30rpx;
}

.scenic-box {
  display: flex;
  align-items: left;
  flex-direction: column;
  height: 160rpx;
  justify-content: space-evenly;
  flex: 1;
  margin: 0 30rpx 0 15rpx;
}

.price-box {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

.scenic-price text {
  color: $sl-color-price;
}

.scenic-price .price-sign {
  font-size: 26rpx;
}

.scenic-price .price-text {
  font-size: 20rpx;
  color: #999999;
}

.scenic-price text.price {
  font-size: 36rpx;
  font-weight: 500;
}

.tag-box {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.tag {
  padding: 4rpx 10rpx;
  height: 32rpx;
  text-align: center;
  line-height: 32rpx;
  font-size: 20rpx;
  color: #F75D1F;
  border-radius: 4rpx;
  border: 2rpx solid #F7CDBC;
  margin-right: 8rpx;
}

.look {
  width: 108rpx;
  height: 48rpx;
  background: $sl-color-btn-background;
  border-radius: 22rpx;
  text-align: center;
  line-height: 48rpx;
  color: #fff;
  font-size: 26rpx;
}

.line-view {
  height: 1rpx;
  width: 570rpx;
  background: #f6f6f6;
  position: absolute;
  right: 0;
  z-index: 1;
}
</style>

